<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .container {
            width: 100%;
            background: orangered;
        }

        .swiper-container {
            width: 800px;
            height: 440px;
        }

        .btn-active {
            background: orangered;
            opacity: 1;
        }

        .content {
            width: 1000px;
            margin: 50px auto 200px;
        }

        .menu {
            position: fixed;
            left: 200px;
            top: 500px;
            height: 248px;
            border-top: 1px solid #ccc;
        }

        .menu>li {
            padding: 10px 20px;
            background: #fff;
            cursor: pointer;
            text-align: center;
            border: 1px solid #ccc;
            border-top: 0;
        }

        .menu>li.active {
            background: #ccc;
            color: #fff;
        }

        .menu>li:hover {
            background: #ccc
        }

        .return {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background: url(img/1.jpeg)"></div>
                <div class="swiper-slide" style="background: url(img/2.jpg)"></div>
                <div class="swiper-slide" style="background: url(img/3.jpg)"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div class="content">
        <div style="height: 300px;background:red;"></div>
        <div style="height: 200px;background:blue;"></div>
        <div style="height: 500px;background:green;"></div>
        <div style="height: 400px;background:orange;"></div>
        <div style="height: 600px;background:purple;"></div>
    </div>
    <ul class="menu">
        <li class="item">红色</li>
        <li class="item">蓝色</li>
        <li class="item">绿色</li>
        <li class="item">橙色</li>
        <li class="item">紫色</li>
        <li class="return">top</li>
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <script>
        $(() => {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay: true,//等同于以下设置
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                effect: 'fade',
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    bulletActiveClass: 'btn-active',
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
            $(window).scroll(function () {
                if ($(window).scrollTop() === 0) {
                    $(".return").hide()
                } else {
                    $(".return").show()
                }
                $(".content>div").each(function () {
                    if ($(this).position().top - $(window).scrollTop() < 150) {
                        $(".menu>li").eq($(this).index()).addClass("active").siblings(".active").removeClass("active")
                    }
                })
            })

            $(".menu>li.item").click(function () {
                $('html , body').animate({
                    scrollTop: $(".content>div").eq($(this).index()).position().top - 150
                }, 'slow');
            })

            $(".menu>li.return").click(function () {
                $('html , body').animate({ scrollTop: 0 }, 'slow');
            })

        })
    </script>
</body>

</html>